<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 500px;border: solid 1px black;margin: 0 auto;}
        .box .news{height: 80px; margin: 10px 0;background: #ccc;position: relative;}
        .news h2{margin: 0;line-height: 80px;}
        .news p{position: absolute;margin: 0;width: 300px;background: #efefef;left:0;top:0;z-index: 1;display: none;}
        .news span{position: absolute;left:0;top:0;right: 0;bottom: 0; z-index: 2;}
    </style>
</head>
<body>
    <div class="box">
        <div class="news">
            <h2>新闻1的标题新闻1的标题</h2>
            <span></span>
            <p>这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域这是新闻1 的内容区域</p>
        </div>
        <div class="news">
            <h2>新闻2的标题新闻2的标题新闻2的标题新闻2</h2>
            <span></span>
            <p>这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容这是新闻2的内容</p>
        </div>
    </div>
</body>
<script>
    var ah2 = document.querySelector(".box").querySelectorAll("span");
    for(var i=0;i<ah2.length;i++){
        ah2[i].onmouseover = function(){
            this.nextElementSibling.style.display = "block";
        }
        ah2[i].onmouseout = function(){
            this.nextElementSibling.style.display = "none";
        }
        ah2[i].onmousemove = function(eve){
            var e = eve || window.event;
            this.nextElementSibling.style.left = e.pageX - this.parentNode.offsetLeft + "px";
            this.nextElementSibling.style.top = e.pageY - this.parentNode.offsetTop + "px";
        }
    }

    // 使用其他坐标，模拟offsetX

</script>
</html>